<template>
  <div class="login-box">
    <div v-show="!show" class="welcome">
      <van-circle
        v-model="currentRate"
        @click.native="show = true"
        size="36px"
        :clockwise="false"
        :text="`${Math.ceil(currentRate / 20)}s`"
      />
      <span class="t">店加优选</span>
      <span class="right-info">kasjdhfwio技术支持 &copy;2022-</span>
    </div>
    <div v-show="show" class="login-content">
      <div class="wlc">
        <span>你好，</span>
        <span>欢迎登录</span>
      </div>
      <div class="box">
        <input type="text" placeholder="请输入手机号" v-model="phone" />
      </div>
      <div class="box">
        <input type="text" placeholder="请输入验证码" v-model="code" />
        <div class="yzm">
          <span @click="codeEvt">{{ codeText }}</span>
        </div>
      </div>
      <span class="zc" @click="goRegister">没有账号？立即注册</span>
      <van-checkbox
        class="remember"
        v-model="remember"
        shape="square"
        icon-size="16px"
        >记住手机号？</van-checkbox
      >
      <van-checkbox v-model="checked" shape="square" icon-size="16px"
        >同意《用户协议》《隐私协议》</van-checkbox
      >
      <van-button :disabled="!checked" @click="loginEvt" color="#1989FA" block
        >登录</van-button
      >
      <em @click="passwordEvt">密码登录</em>
      <span class="right-info">kasjdhfwio技术支持 &copy;2022-</span>
    </div>
  </div>
</template>

<script>
import { AES, enc, MD5 } from "crypto-js";
import { getCodeApi, loginApi } from "../../apis/loginApi";
export default {
  data() {
    return {
      currentRate: 0,
      show: false,
      phone: "",
      code: "",
      checked: false,
      remember: false,
      codeText: "获取验证码",
      list: [],
      interval: null,
    };
  },
  async mounted() {
    this.interval = setInterval(() => {
      this.currentRate -= 1;
      if (this.currentRate <= 0) {
        clearInterval(this.interval);
        this.interval = null;
        this.show = true;
      }
    }, 50);
    this.cachePhone()
  },
  methods: {
    passwordEvt(){ this.$router.push("/password");},
     cachePhone() {
      let phone = localStorage.getItem("my-phone");
      if (!!phone) {
        this.phone = AES.decrypt(phone, "123456").toString(
          enc.Utf8
        );
        this.remember = true;
      }
    },
    async codeEvt() {
      /** 实现节流 */
      if (this.codeText !== "获取验证码") return;

      /** 判断手机号是否正确 */
      if (!/^1[3-9]{1}[0-9]{9}$/.test(this.phone)) {
        this.$toast({
          message: "正确填写手机号",
          position: "bottom",
        });
        return;
      }
      this.codeText = "验证码获取···";
      let res = await getCodeApi(this.phone);
      if (res.code !== 200) {
        this.$toast({
          message: "验证码获取失败",
          position: "bottom",
        });
        this.codeText = "获取验证码";
        return;
      }
      this.$toast(`验证码为：${res.data.code}`);
      this.codeText = "重新获取(60s)";
      this.loopTimer(Date.now());
    },
    loopTimer(_st) {
      this.codeTimer = setTimeout(() => {
        clearTimeout(this.codeTimer);
        this.codeTimer = null;

        let _pt = 60 - Math.floor((Date.now() - _st) / 1000);
        this.codeText = `重新获取(${_pt}s)`;
        if (_pt > 0) {
          this.loopTimer(_st);
        } else {
          this.codeText = "获取验证码";
        }
      }, 100);
    },
   
    async loginEvt() {
      let res = await loginApi({ phone: this.phone, code: this.code });
      if (res.code !== 200) {
        this.$toast({
          message: "登录失败，请重试",
          position: "bottom",
        });
        return;
      }
      this.$store.commit("common/mutationUser", res.data);
      /** 判断是否保存手机号 */
      if (this.remember) {
        localStorage.setItem(
          "my-phone",
          AES.encrypt(this.phone, "123456").toString()
        );
      } else {
        localStorage.removeItem("my-phone");
      }
      this.$store.commit("common/mutationToken", res.data.token);

      this.$router.push("/index");
    },
    goRegister(){
      this.$router.push('/register')
    }
  },
  watch: {
    phone() {
      this.code = "";
      if (!!this.codeTimer) {
        clearTimeout(this.codeTimer);
        this.codeTimer = null;
        this.codeText = "获取验证码";
      }
    },
  },
};
</script>
<style lang="less" scoped>
.rel() {
  display: block;
  position: relative;
  height: 100%;
}
.login-box {
  text-align: right;
  .rel();
  em{
     display: block;
    text-align: center;
    font-size: 0.7rem;
    color: #666;
    font-style: normal;
    margin-top: 50px;  }
  .welcome {
    .rel();
    padding-top: 35vh;
    .van-circle {
      display: block;
      position: absolute;
      top: 10px;
      right: 10px;
    }
    .t {
      display: block;
      font-size: 2rem;
      font-weight: 600;
      color: #fd3434;
      text-align: center;
    }
  }
  .login-content {
    .rel();
    padding: 0 40px;
    .wlc {
        text-align: left;
      margin-top: 18vh;
      margin-bottom: 30px;
      span {
        display: block;
        font-weight: 600;
      }
    }
    .box {
      display: flex;
      width: 100%;
      position: relative;
      border-bottom: 2px solid #ccc;
      font-size: 0.7rem;

      input {
        flex: 1;
        border: none;
        padding: 10px 0 10px 10px;
        line-height: 32px;
      }
      .yzm {
        flex: 0 0 100px;
        text-align: center;
        span {
          color: #666;
          font-size: 0.6rem;
          line-height: 52px;
          padding: 4px 5px;
          border: 1px solid #666;
          border-radius: 4px;
        }
      }
    }
    .box:nth-child(2) {
      border-bottom: 2px solid #fd3434;
    }
    .zc {
      font-size: 0.6rem;
      line-height: 32px;
    }
    .van-button {
      margin-top: 20px;
    }
    .van-checkbox {
      font-size: 0.6rem;
    }
    .remember {
      margin-bottom: 8px;
    }
  }
  .right-info {
    display: block;
    position: absolute;
    bottom: 20px;
    width: 100%;
    font-size: 0.6rem;
    color: #aaa;
    text-align: center;
  }
}
</style>